动态el

2023-06-08 21:42| 来源: 网络整理| 查看: 265

需求：弹窗就写一次，样式和标题根据内容不同传参也不同，弹窗的样式也做了更改，之前本来是想做封装的，但是弹窗封装未免也太麻烦了，那不就违背初衷了嘛，本来就是想便利点，不用写多次

//把弹窗的内容拆出,变成父子传值的方式实现，有多个弹窗就用if来判断显示内容

data的内容

dialog: { title: "", width: "", dialogVisible: false }, terminal: 1, //弹窗内容判断 terminalFlag: 1, terminalForm: {}

假如用户点击按钮显示弹窗，这样就可以打开弹窗了

//打开弹窗 sensor(row) { this.terminal = 2; this.dialog.title = "标题内容"; this.dialog.width = "450px"; this.dialog.dialogVisible = true; }, // 关闭弹窗 dialogClose() { this.dialog.dialogVisible = false; },

细心的小伙伴应该发现弹窗没有确认和取消按钮吧，我这边是直接放在弹窗内容里面了，好做直接判断。取消就是关闭弹窗和清空表单操作了，根据自己实际情况来

取消确定 .save-data-div{ margin-top: 20px; button:nth-child(2){ float: right; } } //子组件内容 closeClearFrom(val){ this.$emit("closeClearFrom",val); }, //父组件内容 closeDialog(val) { this.dialog.dialogVisible = false; },

这样就实现了一个弹窗多内容，是不是很方便，如果有更好的方法，麻烦评论区告诉我谢谢~文章到此结束希望对你有所帮助~

【本文地址】

动态el

动态el

今日新闻

推荐新闻